﻿<template>
  <div class="purchase-return-detail-management">
    <div class="page-header">
      <h2>采购退货明细</h2>
    </div>

    <div class="search-panel">
      <div class="search-form">
        <div class="form-group">
          <label>采购单号</label>
          <input 
            v-model="query.orderNo" 
            @keyup.enter="search" 
            placeholder="请输入采购单号" 
            class="form-input"
          />
        </div>
        <div class="form-group">
          <label>商品名称</label>
          <input 
            v-model="query.productName" 
            @keyup.enter="search" 
            placeholder="请输入商品名称" 
            class="form-input"
          />
        </div>
        <div class="form-group">
          <label>采购日期</label>
          <input 
            v-model="query.purchaseDate" 
            type="date" 
            class="form-input"
          />
        </div>
        <button @click="search" class="btn-primary">查询</button>
        <button @click="reset" class="btn-secondary">重置</button>
      </div>
    </div>

    <div class="data-panel">
      <div class="panel-header">
        <h3>采购退货列表</h3>
        <p>所有退货单明细</p>
      </div>
      
      <div v-if="loading" class="loading">
        加载中...
      </div>
      
      <div v-else-if="list.length === 0" class="empty">
        暂无数据
      </div>
      
      <div v-else class="table-container">
        <table class="data-table">
          <thead>
            <tr>
              <th>采购单号</th>
              <th>商品名称</th>
              <th>退货数量</th>
              <th>退货单价</th>
              <th>退货金额</th>
              <th>退货日期</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in list" :key="item.id">
              <td>{{ item.orderNo || "-" }}</td>
              <td>{{ item.productName || "-" }}</td>
              <td>{{ item.returnQuantity || 0 }}</td>
              <td>{{ item.returnUnitPrice?.toFixed(2) || "0.00" }}</td>
              <td>{{ item.returnAmount?.toFixed(2) || "0.00" }}</td>
              <td>{{ formatDate(item.returnDate) }}</td>
              <td class="action-cell">
                <button @click="viewDetail(item)" class="btn-view">查看</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="pagination">
      <button @click="prevPage" :disabled="pageNum === 1" class="btn-page">上一页</button>
      <span class="page-info">
        第 {{ pageNum }} 页，共 {{ Math.ceil(total / pageSize) }} 页，总计 {{ total }} 条
      </span>
      <button @click="nextPage" :disabled="pageNum * pageSize >= total" class="btn-page">下一页</button>
    </div>

    <!-- 详情对话框 -->
    <div v-if="showDetail" class="dialog-overlay" @click="closeDetail">
      <div class="dialog-content" @click.stop>
        <div class="dialog-header">
          <h3>退货明细详情</h3>
          <button @click="closeDetail" class="btn-close"></button>
        </div>
        
        <div class="dialog-body">
          <div v-if="detail" class="detail-content">
            <div class="detail-section">
              <h4>基本信息</h4>
              <div class="detail-grid">
                <div class="detail-item">
                  <label>采购单号：</label>
                  <span>{{ detail.orderNo || "-" }}</span>
                </div>
                <div class="detail-item">
                  <label>商品名称：</label>
                  <span>{{ detail.productName || "-" }}</span>
                </div>
                <div class="detail-item">
                  <label>退货数量：</label>
                  <span>{{ detail.returnQuantity || 0 }}</span>
                </div>
                <div class="detail-item">
                  <label>退货单价：</label>
                  <span>{{ detail.returnUnitPrice?.toFixed(2) || "0.00" }}</span>
                </div>
                <div class="detail-item">
                  <label>退货金额：</label>
                  <span>{{ detail.returnAmount?.toFixed(2) || "0.00" }}</span>
                </div>
                <div class="detail-item">
                  <label>退货日期：</label>
                  <span>{{ formatDate(detail.returnDate) }}</span>
                </div>
                <div class="detail-item">
                  <label>创建时间：</label>
                  <span>{{ formatDate(detail.createTime) }}</span>
                </div>
                <div class="detail-item">
                  <label>备注：</label>
                  <span>{{ detail.remark || "-" }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="dialog-footer">
          <button @click="closeDetail" class="btn-primary">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue"
import { apiGet } from "../../utils/api.js"

// 响应式数据
const loading = ref(false)
const list = ref([])
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)

// 搜索条件
const query = reactive({
  orderNo: "",
  productName: "",
  purchaseDate: ""
})

// 对话框状态
const showDetail = ref(false)
const detail = ref(null)

// 生命周期
onMounted(() => {
  load()
})

// 方法
async function load() {
  loading.value = true
  try {
    const params = {
      current: pageNum.value,
      size: pageSize.value,
    }
    
    // 添加搜索条件
    if (query.orderNo) params.orderNo = query.orderNo
    if (query.productName) params.productName = query.productName
    if (query.purchaseDate) params.purchaseDate = query.purchaseDate
    
    // 过滤空值
    Object.keys(params).forEach(key => {
      if (params[key] === "" || params[key] === null || params[key] === undefined) {
        delete params[key]
      }
    })
    
    const qs = new URLSearchParams(params).toString()
    const response = await apiGet(`/procure-service/purchase-return-detail/page${qs ? `?${qs}` : ""}`)
    
    console.log("采购退货明细API响应数据:", response)
    
    // 处理不同的响应结构
    let records = []
    let totalCount = 0

    if (response.data) {
      // 如果响应有data字段
      records = response.data.records || response.data.list || []
      totalCount = response.data.total || 0
    } else if (response.records) {
      // 如果响应直接有records字段
      records = response.records || []
      totalCount = response.total || 0
    } else if (Array.isArray(response)) {
      // 如果响应直接是数组
      records = response
      totalCount = response.length
    }

    console.log("解析后的records:", records)
    console.log("解析后的total:", totalCount)

    list.value = records.map(r => ({ ...r, id: r.id != null ? String(r.id) : r.id }))
    total.value = totalCount

    console.log("处理后的数据:", list.value)
  } catch (error) {
    console.error("加载失败:", error)
    list.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

function search() {
  pageNum.value = 1
  load()
}

function reset() {
  query.orderNo = ""
  query.productName = ""
  query.purchaseDate = ""
  pageNum.value = 1
  load()
}

function prevPage() {
  if (pageNum.value > 1) {
    pageNum.value--
    load()
  }
}

function nextPage() {
  if (pageNum.value * pageSize.value < total.value) {
    pageNum.value++
    load()
  }
}

function viewDetail(item) {
  detail.value = item
  showDetail.value = true
}

function closeDetail() {
  showDetail.value = false
  detail.value = null
}

function formatDate(dateString) {
  if (!dateString) return "-"
  const date = new Date(dateString)
  return date.toLocaleDateString("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit"
  })
}
</script>

<style scoped>
.purchase-return-detail-management {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.search-panel {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  gap: 20px;
  align-items: end;
  flex-wrap: wrap;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group label {
  color: #666;
  font-size: 14px;
  font-weight: 500;
}

.form-input {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  font-size: 14px;
  width: 200px;
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.btn-primary {
  padding: 8px 16px;
  border: 1px solid #3b82f6;
  border-radius: 6px;
  background: #3b82f6;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.btn-primary:hover {
  background: #2563eb;
}

.btn-secondary {
  padding: 8px 16px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  background: #fff;
  color: #666;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.btn-secondary:hover {
  background: #f8f9fa;
}

.data-panel {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.panel-header {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
}

.panel-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.panel-header p {
  margin: 5px 0 0 0;
  color: #666;
  font-size: 14px;
}

.loading, .empty {
  padding: 40px;
  text-align: center;
  color: #666;
  font-size: 16px;
}

.table-container {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
  color: #666;
  background: #f8f9fa;
  font-weight: 600;
  white-space: nowrap;
}

.data-table td {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
}

.action-cell {
  white-space: nowrap;
}

.btn-view {
  padding: 4px 8px;
  border: 1px solid #909399;
  border-radius: 4px;
  background: #fff;
  color: #909399;
  cursor: pointer;
  margin-right: 8px;
  font-size: 12px;
  transition: all 0.3s;
}

.btn-view:hover {
  background: #909399;
  color: #fff;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  gap: 10px;
}

.btn-page {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  color: #666;
  font-size: 14px;
  transition: all 0.3s;
}

.btn-page:hover:not(:disabled) {
  background: #f8f9fa;
}

.btn-page:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  color: #666;
  font-size: 14px;
}

/* 对话框样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog-content {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.dialog-header {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.btn-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-close:hover {
  color: #666;
}

.dialog-body {
  padding: 20px;
}

.detail-content {
  max-height: 60vh;
  overflow-y: auto;
}

.detail-section {
  margin-bottom: 30px;
}

.detail-section h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 2px solid #3b82f6;
  padding-bottom: 8px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
}

.detail-item {
  display: flex;
  align-items: center;
}

.detail-item label {
  font-weight: 500;
  color: #666;
  margin-right: 8px;
  min-width: 100px;
}

.detail-item span {
  color: #333;
}

.dialog-footer {
  padding: 20px;
  border-top: 1px solid #ebeef5;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
